<template>
   <span>
     <Drawer :title="'课程目录-'+course.courseTitle" placement="right" v-model="catLogDrawer" width="60%">
        <Card>
          <Row class="operation" style="padding-bottom: 10px;">
            <Button @click="addCataLog" type="primary" icon="md-add">添加一级目录</Button>
            <Button @click="add" icon="md-add" :disabled="form.isParent==0">添加子节点</Button>
            <Button @click="delAll" icon="md-trash">删除</Button>
            <Button @click="getCataLogTreeData" icon="md-refresh">刷新</Button>
          </Row>
          <Row type="flex" justify="start" class="code-row-bg">
              <Col span="5">
                <div class="custom-tree-bar">
                  <Tree ref="tree" :data="data" @on-select-change="selectTree"></Tree>
                </div>
                <Spin size="large" fix v-if="treeLoading"></Spin>
              </Col>
              <Col span="19">
              <Form ref="catalogForm" :model="form" :label-width="85" :rules="formValidate">
                  <FormItem label="目录编号" prop="cataLogNo">
                      <Input v-model="form.cataLogNo" style="width: 120px" placeholder="自定义编号"/>
                </FormItem>
                  <FormItem label="标题名称" prop="cataLogTitle">
                      <Input v-model="form.cataLogTitle"/>
                </FormItem>

                 <FormItem label="上传视频" prop="cataLogUrl" v-if="showParent">
                    <upload-video @on-change="handleUpload" :fileSize="fileSize" @on-before="onBefore" :fileUrl="form.cataLogUrl" width="380px" ref="uploadVideo"></upload-video>
                </FormItem>
                <FormItem label="是否收费" prop="isFree" v-if="showParent&&isFree==1">
                  <i-switch size="large" v-model="form.isFree" :true-value="1" :false-value="0">
                    <span slot="open">收费</span>
                    <span slot="close">免费</span>
                  </i-switch>
                </FormItem>
                  <FormItem label="目录状态" prop="status">
                  <i-switch size="large" v-model="form.status" :true-value="1" :false-value="0">
                    <span slot="open">上架</span>
                    <span slot="close">下架</span>
                  </i-switch>
                </FormItem>
                <Form-item>
                    <Button @click="submitEdit" :loading="submitLoading" :disabled="saveBtn" type="primary" icon="ios-create-outline" style="margin-right:5px">保存</Button>
                    <Button type="primary" style="margin-right:5px" @click="showVideo" v-if="videoBtn">预览</Button>
                    <!--<Button @click="handleReset">重置</Button>-->
                </Form-item>
              </Form>
              </Col>
          </Row>
        </Card>
      </Drawer>
      </span>
</template>

<script>
    import {selectCataLog, addCataLog, editCataLog, delCataLog} from "@/api/bus";
    import uploadVideo from "@/views/my-components/flyme/upload-video";

    export default {
        name: "catlogDrawer",
        components: {
            uploadVideo
        },
        data() {
            return {
                treeLoading: false, // 树加载状态
                catLogDrawer: false,
                loadingEdit: false, // 编辑上级树加载状态
                selectList: [], // 多选数据
                selectCount: 0, // 多选计数
                course: {},
                showParent: true, // 显示上级标识
                modalTitle: "", // 添加标题
                saveBtn: true,
                fileSize: 512000,
                editTitle: "", // 编辑节点名称
                searchKey: "", // 搜索树
                videoVisible: false,
                isFree: 0,//课程免费状态
                videoBtn: false,
                form: {
                    // 编辑对象初始化数据
                    id: "",
                    parentId: "",
                    isParent: 0,
                    parentTitle: "",
                    cataLogNo: "",
                    cataLogUrl: "",
                    videoId: "",
                    status: 1,
                    videoId: "",
                    isFree: 0,
                    cataLogTitle: "",
                    sortOrder: 0
                },
                formAdd: {
                    // 添加对象初始化数据
                },
                formValidate: {
                    cataLogTitle: [{required: true, message: "标题不能为空", trigger: "blur"}],
                },
                submitLoading: false,
                data: [],
                dataEdit: []
            };
        },
        methods: {
            init() {
                // 初始化一级节点

            },
            show(course) {
                this.course = course;
                this.isFree = course.isFree;
                this.getCataLogTreeData();
                this.catLogDrawer = true;
            },
            getCataLogTreeData() {
                this.treeLoading = true;
                selectCataLog({courseId: this.course.id}).then(res => {
                    this.treeLoading = false;
                    if (res.status === true) {
                        this.data = res.data;
                        this.showParent = false;
                        this.videoBtn = true;
                    }
                });
            },
            //添加一级目录
            addCataLog() {
                addCataLog({parentId: "0", courseId: this.course.id}).then(res => {
                    if (res.status === true) {
                        this.getCataLogTreeData();
                    }
                });
            },
            handleUpload(fileUrl) {
                this.videoBtn = true;
                this.saveBtn = false;
                this.videoBtn = true;
                this.form.cataLogUrl = fileUrl;
            },
            onBefore() {
                this.saveBtn = true;
                this.videoBtn = false;
            },
            search() {

            },
            showVideo() {
                const dp = new DPlayer({
                    container: document.getElementById("dplayer"),
                    screenshot: true,
                    video: {
                        url: this.form.cataLogUrl,
                        type: 'mp4'
                    }
                });
                this.videoVisible = true;
            },
            selectTree(v) {
                if (v) {
                    let str = JSON.stringify(v[0]);
                    let data = JSON.parse(str);
                    if (data.parentId == 0) {
                        this.showParent = false;
                        this.saveBtn = false;
                        this.videoBtn = false;
                    } else {
                        this.showParent = true;
                        this.saveBtn = false;
                    }
                    this.form = data;
                    this.form.cataLogTitle = data.title;
                }
            },
            cancelEdit() {
                this.isMenu = false;
                this.isButton = false;
                this.$refs.catalogForm.resetFields();
                delete this.form.id;
                this.editTitle = "";
            },
            cancelAdd() {

            },
            handleReset() {
                this.$refs.catalogForm.resetFields();
                this.form.status = 0;
            },
            submitEdit() {
                this.$refs.catalogForm.validate(valid => {
                    if (valid) {
                        if (!this.form.id) {
                            this.$Message.warning("请先点击选择要修改的节点");
                            return;
                        }
                        if(this.isFree == 0){
                            this.form.isFree = 0
                        }
                        this.submitLoading = true;
                        editCataLog(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.status === true) {
                                this.$Message.success("修改成功");
                                this.getCataLogTreeData();
                            }
                        });
                    }
                });
            },
            add() {
                if (this.form.id == "" || this.form.id == null) {
                    this.$Message.warning("请先点击选择一个节点");
                    return;
                }
                addCataLog({parentId: this.form.id, courseId: this.course.id}).then(res => {
                    if (res.status === true) {
                        this.getCataLogTreeData();
                    }
                });


            },
            changeSelect(v) {
                this.selectCount = v.length;
                this.selectList = v;
            },
            delAll() {
                if (this.form.id == "" || this.form.id == null) {
                    this.$Message.warning("请先点击选择一个节点");
                    return;
                }
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除?",
                    onOk: () => {
                        delCataLog(this.form.id).then(res => {
                            if (res.status === true) {
                                this.$Message.success("删除成功");
                                this.getCataLogTreeData();
                            }
                        });
                    }
                });
            }
        },
        mounted() {
            this.init();
        }
    };
</script>